<template>
  <div class="maskingwerp">
      <!-- 遮罩层 -->
            <!-- 配送至 -->
            <div class="peisong">
                <van-field
                v-model="fieldValue"
                is-link
                readonly
                label="配送至"
                placeholder="请选择所在地区"
                @click="show = true"
                />
                <van-popup v-model="show" round position="bottom">
                <van-cascader
                    v-model="cascaderValue"
                    title="请选择所在地区"
                    :options="options"
                    @close="show = false"
                    @finish="onFinish"
                    />
                </van-popup>      
            </div>
            <hr>
            <!-- 配送至 -->

            <!-- 物流分类 -->
            <ul class="option">
                <li>京东物流</li>
                <li class="active">有货优先
                    <div class="jiaobiao">1</div>
                </li>
                <li>货到付款</li>
                <li>新品</li>
                <li>京东国际</li>
                <li>PLAS专享</li>
                <li>促销商品</li>
                <li>配送全球</li>
                <li>拍拍二手</li>
            </ul>
            <!-- 物流分类 -->

            <!-- 分类 -->
            <div class="classify">
                <div class="titleName">分类</div>
                <div class="iconName" @click = "gotolink">
                    全部分类  <van-icon name="arrow" />
                </div>
            </div>
            <!-- 分类 -->


            <!-- 品牌 -->
            <div class="littleTitle price">品牌</div> 
            <ul class="option">
                <li >小米</li>
                <li>十月稻田</li>
                <li>燕之坊</li>
                <li>炒货大院</li>
                <li>天地粮人</li>
                <li>金龙鱼</li>
                <li>方家铺子</li>
                <li>贝盾</li>
                <li class="findBrandAll" @click = "gotolink">查看全部<van-icon name="arrow" /></li>
            </ul>
            <!-- 品牌 -->


            <!-- 屏幕属性 -->
            <div class="littleTitle price">屏幕尺寸</div>
            <ul class="option">
                <li>6.95英寸及以上</li>
                <li>6.75-6.84</li>
                <li>86英寸以上</li>
                <li>6.0-6.2英寸</li>
                <li>6.85-6.94</li>
                <li>80-86英寸</li>
                <li>77-70英寸</li>
                <li>65英寸</li>
                <li class="findScreenAll">查看全部<van-icon name="arrow" /></li>
            </ul>
            <!-- 屏幕属性 -->


  </div>
</template>

<script>
export default {
  name: "Masking",
   data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '北京朝阳区',
          value: '330000',
          children: [{ text: '三环到四环之间', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    };
  },
  methods: {
    gotolink(){
        //指定跳转地址
        this.$router.replace('/Carlist')
    },


    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
  },
};
</script>

<style lang='less' scoped>
    .maskingwerp{
        margin: 5px;
        // 列表
        .option{
            margin:  15px 0;
            background: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 15px;
            li{
                box-sizing:border-box;
                    display:  inline-block;
                    background-color: aliceblue ;
                    color: rgb(47, 38, 38);
                    margin:  6px;
                    padding: 5px;
                    width: 30%;
                    border-radius: 3px;
                    box-shadow: 1px 1px 1px rgba(110, 154, 179, 0.3);

            }
            .active{
                
                    background-color:rgb(255, 240, 240) ;
                    color: rgba(246, 23, 23, 0.918);
                    position: relative;
                    .jiaobiao{
                            width:0;
                            height:0;
                            border-width:0px 0px 10px 10px;
                            border-style:dotted dotted solid dotted;
                            border-color:transparent transparent rgb(243, 7, 7) transparent;
                            overflow: hidden;
                            position: absolute;
                            right: 0;
                            bottom: 0;
                    }
                }
            .findBrandAll{
                background-color: #fff;
                border:1px solid rgb(189, 189, 190)
            }
            .findScreenAll{
                background-color: #fff;
                border:1px solid rgb(189, 189, 190)
            }
            
        }
        // 分类
        .classify{
                    
            height: 30px;
            margin: 20px 5px;
            background-color: aliceblue ;border-radius: 3px;
            box-shadow: 1px 1px 1px rgba(110, 154, 179, 0.3);
            text-align: center;
            .titleName{
                float:left;
                display:inline-block;
                font-size: 15px;
                font-weight: 700;
                line-height: 10px;
                color: rgb(47, 38, 38);
                margin: 6px;
                padding: 5px;
                width: 10;
            }
            .iconName{
                float: right;
                font-size: 12px;
                font-weight: 100;
                line-height: 12px;
                color: rgb(75, 62, 62);
                margin: 6px;
                padding: 5px;
                width: 10;
            }

        }
        // 小标题
        .littleTitle{
            
            // float: left;
            font-size: 15px;
            height: 20px;
            margin: 10px 5px;
            text-align: left;
            font-weight: 700;
            line-height: 10px;
            color: rgb(47, 38, 38);
            margin: 6px;
            padding: 5px;
            border-bottom: rgb(212, 208, 208) 1px solid;
        }
    }

</style>